import { Table, Image, Space, Button, Switch } from 'antd'
import { useEffect, useState } from 'react'
import {  getProList, updateFlag } from '../../api/pro'

const Com = (props) => {

  // 固定头和列
  const [height, setHeight] = useState(0)

  // 分页器
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  useEffect(() => {
    setHeight(window.innerHeight)
  }, [])

  const columns = [
    {
      title: '序号',
      align: 'center',
      width: 60,
      flxed: 'left',
      render: (text, record, index) =>(<span>{ (current-1)*pageSize + index + 1 }</span>)
    },
    {
      title: '图片',
      align: 'center',
      width: 120,
      flxed: 'left',
      dataIndex: 'img1',
      render: (text, record, index) =>(<Image src = { text } style={{ width: 80, height: 80 }}></Image>)
    },
    {
      title: '标题',
      align: 'center',
      width: 150,
      flxed: 'left',
      dataIndex: 'proname'
    },
    {
      title: '作者',
      align: 'center',
      width: 110,
      dataIndex: 'brand'
    },
    {
      title: '是否推荐',
      align: 'center',
      width: 100,
      flxed: 'right',
      dataIndex: 'issale',
      render: (text, record, index) => (
        // console.log(record),
        <Switch checked = { text === 1} onChange={(checked) => {
          updateFlag({
            proid: record.proid,
            type: 'issale',
            flag: checked
          }).then(() => { // 重新获取数据
            getProList().then(res => {
              setProList(res.data)
            })
          }) 
        }} />
      )
    },
    {
      title: '是否可见',
      align: 'center',
      width: 100,
      flxed: 'right',
      dataIndex: 'isseckill',
      render: (text, record, index) => {
        return (
          <Switch checked = { text === 1 }  onChange = { (checked) => {
            updateFlag({
              proid: record.proid,
              type: 'isseckill',
              flag: checked
            }).then(() => {
              getProList().then((res) => {
                setProList(res.data)
              })
            })
          }} />
        )
      }
    },
    {
      title: '操作',
      align: 'center',
      width: 200,
      flxed: 'right',
      render: (text, record, index) => (
        <Space>
          <Button type="primary">编辑</Button>
          |
          <Button danger>删除</Button>
        </Space>
      )
    }
  ]

  
  const [prolist, setProList] = useState([])


  useEffect(() => {
    getProList().then(res => {
      setProList(res.data)
    })
  }, [])

  return (
    <Space direction="vertical" style= {{width: '100%'}}>
      <Button 
        type="primary" 
        style={{ marginBottom: '10px'}}
        onClick = { () => {
          props.history.push('/pro/add')
        }}
      >添加文章</Button>
      <Table 
      dataSource = { prolist } 
      columns = {columns} 
      rowKey = "proid"
      scroll = {{  x: 1300 , y: height - 315}}
      pagination = { {
        position: ['bottomRight'],
        current, // 当前页数
        pageSize, // 每页条数
        onChange: (page, pageSize) => { // 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
          setCurrent (page)
          setPageSize(pageSize)
        },
        pageSizeOptions: ['5', '10', '15', '20'], // 指定每页可以显示多少条 // 看不加引号会不会报错
        showQuickJumper: true, // 是否可以快速跳转至某页
        showTotal: (total) => <span>共有{total}条数据</span>
      } }
      />
    </Space>
  )
}

export default Com